<template>
  <div class="login">
    <!-- 登录的头部 -->
    <div class="head">
      <div class="head-left" @click="$router.go(-1)">
        <van-icon name="arrow-left" size="22" />
      </div>
      <div class="logo">
        登录/注册
      </div>
      <div class="head-right">
        <!-- 气包弹出框 -->
        <van-popover
          placement="bottom-end"
          v-model="showPopover"
          trigger="click"
          :actions="actions"
           @select="onSelect"
        >
          <template #reference>
            <van-icon name="apps-o" size="24" />
          </template>
        </van-popover>
      </div>
    </div>
    <!-- 登录的主体内容 -->
    <div class="warp">
      <div class="logo">
         <img src="https://img02.hua.com/m/login/wx_login_logo.png" alt />
      </div>
      <div class="from">
          <van-form @submit="onSubmit">
              <van-field
                v-model="user.username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
              />
              <van-field
                v-model="user.pwd"
                type="password"
                name="pwd"
                label="密码"
                placeholder="密码"
                :rules="[
                { required: true, message: '请填写密码' },
                {pattern:/^[\u4E00-\u9FA5A-Za-z0-9_]+$/,message:'请输入正确的用户名'}
                ]"
              />
              <div style="margin: 16px;">
                <van-button round block color="#ff734c" type="info" native-type="submit">注册</van-button>
              </div>
          </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from '@api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      },
      showPopover: false, // 控制弹出框的显示
      actions: [
        { text: '首页', icon: 'wap-home-o', path: '/' },
        { text: '分类', icon: 'apps-o', path: '/cate' },
        { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
        { text: '我的', icon: 'smile-o', path: '/user' }
      ]
    }
  },
  methods: {
    onSubmit (params) {
      // 提交表单注册
      register(params).then(res => {
        if (res.data.code === 0) {
          Toast.success({
            message: '注册成功',
            onClose: () => {
              // 注册成功后 弹出提示然后跳转到登录页去
              this.$router.replace('/login')
            }
          })
        }
        if (res.data.code === 10000) {
          Toast.fail({
            message: '用户名已被注册'
          })
        }
      })
    },
    onSelect (action) {
      this.$router.push(action.path)
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  height: 44px;
  display: flex;
  padding: 0 24px 0 12px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  width: 100%;
  img {
    width: 150px;
    height: 20px;
  }
  .icon {
    font-size: 22px;
  }
}
.warp{
  display: flex;
  flex-direction: column;
  padding-top: 44px;
  align-items: center;
  .logo{
    margin: 50px 0 50px 0;
    width:183px;
    height: 24px;
    img{
      width: 100%;
    }
  }
  .van-button{
    margin-bottom: 26px;
  }
  .zhuc{
    width: 100%;
    text-align: center;
    color: #71797f;
  }
}
</style>
